<template>
  <div class="max-box">
    <div class="user-box">
      <van-image class="user-img" round width="1rem" height="1rem" v-if='userInfo.avatarUrl' :src="userInfo.avatarUrl+'?param=180y180'" />
      <van-image class="user-img" round width="1rem" height="1rem" v-else src="../assets/images/personal/missing-face.png" />
      <h4 class="user-name" v-if="userInfo.nickname">{{userInfo.nickname}}</h4>
      <h4 class="user-name" @click="userLogin" v-else>立即登录</h4>
    </div>
    <div style="padding: 0.1rem 0.1rem 0.2rem 0.1rem; box-sizing: content-box; background-color:#ebebeb;">
      <van-cell-group inset title=" ">
        <van-cell icon="icon iconfont icon-xiaoxi" value="我的消息" />
        <van-cell icon="icon iconfont icon-yun_o" value="云贝中心" />
        <van-cell icon="icon iconfont icon-chuangzuo" value="创作者中心" />
      </van-cell-group>
      <van-cell-group inset title="音乐服务">
        <van-cell icon="icon iconfont icon-tianmaohuopiaotongxing" value="云村有票" />
        <van-cell icon="icon iconfont icon-shangcheng" value="商城" />
        <van-cell icon="icon iconfont icon-youxi" value="游戏专区" />
        <van-cell icon="icon iconfont icon-lingdang" value="口袋彩铃" />
      </van-cell-group>
      <van-cell-group inset title="其它">
        <van-cell icon="icon iconfont icon-pifugexinghuazhuti-xianxing" value="个性装扮" />
        <van-cell icon="icon iconfont icon-dingshi" value="定时开关" />
        <van-cell icon="icon iconfont icon-saoyisao" value="扫一扫" />
        <van-cell icon="icon iconfont icon-xiazai" value="边听边存" />
        <van-cell icon="icon iconfont icon-zaixian-xian" value="在线听歌免流量" />
        <van-cell icon="icon iconfont icon-heimingdan" value="音乐黑名单" />
        <van-cell icon="icon iconfont icon-anquan" value="青少年模式" />
        <van-cell icon="icon iconfont icon-naozhong" value="音乐闹钟" />
      </van-cell-group>
      <van-cell-group inset title="  ">
        <van-cell icon="icon iconfont icon-dingdan" value="我的订单" />
        <van-cell icon="icon iconfont icon-youhuiquan" value="优惠券" />
        <van-cell icon="icon iconfont icon-bangzhu_o" value="帮助与反馈" />
        <van-cell icon="icon iconfont icon-guanyu_o" value="关于" />
      </van-cell-group>
      <van-button class="log-out" block round type="danger" size="small" v-if="userInfo.nickname" @click="logOut">退出登录</van-button>
    </div>
  </div>
</template>
<script  type='module'>

export default {
  name: 'LeftPopup',
  data () {
    return {
      userInfo: []// 用户数据
    }
  },
  methods: {
    logOut () {
      this.$dialog.confirm({
        message: '你确定退出登录帐号吗？'
      })
        .then(async () => {
          const res = await this.$http({ url: '/logout' })
          if (res.code === 200) {
            // 清除用户数据
            sessionStorage.removeItem('userInfo')
            sessionStorage.removeItem('token')
            // 清空用户数据
            this.userInfo = []
            this.$toast('您已退出登录')
          }
        })
        .catch(() => {
          // on cancel
          // console.log('hk')
        })
    },
    userLogin () {
      this.$router.push('/login')
    }
  },
  created () {
    // 获取用户信息
    const userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  }
}

</script>

<style lang="less" scoped>
  .user-box {
    display: flex;
    align-items: center;
    z-index: 99;
    .user-img {
      margin: 10px;
    }
    .user-name {
      font-size: 15px;
    }
  }
  .log-out {
    width: 80%;
    margin: 15px auto 15px;
  }
</style>
